<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Adicionar Time</title>
<script type="text/javascript">

var selected = [],
	acao,
	win,
	ADICIONA_MEMBRO = 1,
	ADICIONA_GERENTE = 2;

jsool.onReady(function(){
	  
	jsool
		.get("adicionaMembro")
			.on("click",function(ev1){
				acao = ADICIONA_MEMBRO;
				if(!win || win.closed){
					win = window.open('/requisiteworks/funcionario/util/pesquisar.do'
						,"selectFuncionario"
						,'width=500,height=400,directories=no,location=no,menubar=no,resizable=0,scrollbars=1,status=no,toolbar=no'
						,true);
				}
				win.focus();
		});

	jsool
	    .get("adicionaGerente")
		     .on("click",function(ev2){
		    	acao = ADICIONA_GERENTE;
		    	if(!win || win.closed){
					win = window.open('/requisiteworks/funcionario/util/pesquisar.do'
						,"selectFuncionario"
						,'width=500,height=400,directories=no,location=no,menubar=no,resizable=0,scrollbars=1,status=no,toolbar=no'
						,true);
				}
				win.focus();
		});

	jsool
    	.get("deletaMembro")
		    .on("click",function(ev3){
	            jsool.select("option:selected").each(function(el){
					el = jsool.get(this);
					el.getParent().remove(el);
					el.destroy();
				});
		});

	jsool.get("submit").on("click",function(ev){
		jsool.get("membros").query("option").each(function(el){
			el.selected = true;
		});
	});
});

function onSelect(func){
	if (acao == ADICIONA_MEMBRO){
		if(selected.indexOf(func.numero) < 0){

			js.dom.Helper.append(jsool.get("membros"),{
				tag: "option",
				value: func.numero,
				html: func.nome.toString()
			});
			
			selected.push(func.numero);
		
		}
	}
	
	if (acao == ADICIONA_GERENTE){
   	  jsool.get("numeroGerente").set("value",func.numero);
	  jsool.get("nomeGerente").set("value",func.nome);
	}
}
</script>
</head>
<body>
	<fieldset>
			<legend>Cadastro de Time</legend>
			<form:form modelAttribute="time"  action="/requisiteworks/time/adicionar.do" method="POST">
				<table class="form">
					<tr>
						<td>
							<form:label path="nome" cssErrorClass="erro">Nome: </form:label>
						</td> 
						<td>
							<form:input path="nome" cssErrorClass="erro"/>							
						</td>
						<td>
							<ul>
								<form:errors path="nome" cssClass="erro" element="li"></form:errors>
							</ul>
						</td>
					</tr>
					
					<tr>
						<td>
							<form:label path="gerente.numero" cssErrorClass="erro">Gerente: </form:label>
						</td>
						<td>
							<form:hidden path="gerente.numero" id="numeroGerente"/>
							<form:input path="gerente.nome" id="nomeGerente" disabled="true" />
							<img id="adicionaGerente" style="display: inline;" align="top" src="/requisiteworks/images/add.png" alt="IncluirGerente"/>							
						</td>
						<td>
							<ul>
								<form:errors path="gerente.numero" cssClass="erro" element="li"></form:errors>
							</ul>
						</td>
					</tr>
					
					<tr>
						<td>
							<form:label path="membros" cssErrorClass="erro">Membros: </form:label>
						</td>
						<td>
							<select name="nmembros" multiple="multiple" id="membros">
							</select>
							
							<img id="adicionaMembro" style="display: inline;" align="top" src="/requisiteworks/images/add.png" alt="IncluirMembro"/>
							<img id="deletaMembro" style="margin-left: -20px" src="/requisiteworks/images/delete.png" alt="DeletarMembro"/>
						</td>
						<td>
							<ul>
								<form:errors cssClass="erro" path="membros" element="li"></form:errors>
							</ul>
						</td>
					</tr>
				</table>
				<p>
					<input id="submit" type="submit" value="Salvar"/>
				</p>
			</form:form>
		</fieldset>
</body>
</html>